<template >

<div class="box" >
  <a-tabs
      v-model:activeKey="parentActiveKey"
      @change="parentTabsChange"
      style="padding-left: 14px"
    >
      <a-tab-pane key="视频成片" >
        <template #tab>
          <span><VideoCameraOutlined style="margin-right: 5px;"/>视频成片</span>
        </template>
        <a-tabs
          v-model:activeKey="activeKey"
          @change="handlechange"
          style="padding-left: 14px"
        >
          <a-tab-pane key="3" tab="创作任务" v-if="!only_digital_human">
            <CreativeTask
              ref="CreativeTaskRef"
              :CreativeTaskShow="CreativeTaskShow"
            />
          </a-tab-pane>
          <a-tab-pane key="1" tab="创作成片">
             <CreateFilm  :isshowone="isshowone" /> 
          </a-tab-pane>
          <a-tab-pane key="2" tab="上传成片" >
             <UploadFilm  :isshow="isshow" @kuorong="kuorong" /> 
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
  
  <!--  tab="图文成片" -->
      <a-tab-pane key="图文成片" v-if="!only_digital_human">

        <template #tab>
          <span><FileImageOutlined style="margin-right: 5px;"/>图文成片</span>
        </template>

        <a-tabs
          v-model:activeKey="graphicActiveKey"
          @change="handlechange"
          style="padding-left: 14px"
        >
          <!-- <a-tab-pane key="图片成片" tab="图片成片">
            <GraphicEditingFilm  ref="GraphicEditingFilmRef"></GraphicEditingFilm>
          </a-tab-pane> -->
  
          <a-tab-pane key="图集成片" tab="图集成片">
            <GraphicEditingTask  ref="GraphicEditingTaskRef"></GraphicEditingTask>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
  
    </a-tabs>

</div>
</template>

<script setup>
import { onMounted, ref, watch, onBeforeUnmount, onBeforeMount, onUnmounted, onDeactivated } from "vue";
import { useRouter, useRoute } from "vue-router";

import CreateFilm from "@/views/shotstack/MaterialCenter/CreateFilm.vue";
import UploadFilm from "@/views/shotstack/MaterialCenter/UploadFilm.vue";
import CreativeTask from "@/views/shotstack/MaterialCenter/CreativeTask.vue";
const CreativeTaskRef = ref(null);
import { onBeforeRouteLeave } from "vue-router";

import { FileImageOutlined, VideoCameraOutlined } from "@ant-design/icons-vue"; 

// 图文剪辑成片
import GraphicEditingFilm from './GraphicEditingFilm.vue'
const GraphicEditingFilmRef = ref()

// 图文剪辑成片
import GraphicEditingTask from './GraphicEditingTask.vue'
const GraphicEditingTaskRef = ref()

import {getOnly_digital_human} from '@/common/utils/atherUtils.js'

// 是否是数字人定制路由
const only_digital_human = ref(false)

// 父级 tabBar
const parentActiveKey = ref('视频成片')

// 图文剪辑高亮key
const graphicActiveKey = ref('图集成片')

// 视频成片高亮key
const activeKey = ref("1");

const isshow = ref(false);
const isshowone = ref(true);
const CreativeTaskShow = ref(false);

const currentRoute = useRoute();

// 父tab改变
const parentTabsChange = (e) => {
  
}

const changeActiveKey = (e) => {
  if (e == "2") {
    isshow.value = true;
    isshowone.value = false;
    CreativeTaskShow.value = false;
  } else if (e == "1") {
    isshow.value = false;
    isshowone.value = true;
    CreativeTaskShow.value = false;
  } else {
    CreativeTaskShow.value = true;
    isshow.value = false;
    isshowone.value = false;
  }
};

const handlechange = (e) => {
  changeActiveKey(e);
};

const getOnly_digital_humanFn = async () => {
  only_digital_human.value = await getOnly_digital_human()
}

// 初始化调用
onMounted(() => {
  getOnly_digital_humanFn()
  if(currentRoute.query?.shotstack_task_id){
    activeKey.value  = '3'
  }
  const parentType = currentRoute.query?.parentType
  if (parentType == '图文成片') {
    parentActiveKey.value = parentType
  }
  
  if (currentRoute.query?.activeKey) {
    activeKey.value = currentRoute.query?.activeKey
  }
  changeActiveKey(activeKey.value);

});


onUnmounted(() => {
  CreativeTaskRef.value && CreativeTaskRef.value.clearTimer();
});

onDeactivated(() => {
  CreativeTaskRef.value && CreativeTaskRef.value.clearTimer();
})

const kuorong = () => {
  activeKey.value = "1"
};

watch(
  () => currentRoute,
  (val) => {
    if (val && val.query && val.query.upload && val.query.upload == "2") {
      activeKey.value = "2";
    }

    if (val && val.query && val.query.id && val.query.id == "1") {
      activeKey.value = "1";
    } else if (val && val.query && val.query.id && val.query.id == "2") {
      activeKey.value = "2";
    } else if (val && val.query && val.query.id && val.query.id == "3") {
      activeKey.value = "3";
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="less" scoped>
.box{
  background: #fff;
  border-radius: 8px;
}
</style>
